<template>
    <div id="memberAdd">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>会员管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>添加会员</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="form">
            <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" autoComplete="off">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" placeholder="用户名，由汉字组成"></el-input>
              </el-form-item>
             <el-form-item  label="账号" prop="zhanghao">
                <el-input  v-model="ruleForm.zhanghao" placeholder="账号，由不少于8位纯数字组成"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="ruleForm.mobile" placeholder="请输入正确的手机号码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { regist,getxhgui,getybgui,savePhone,verifyZhangHao,verifyPhone} from './../../../service/api/index.js'
  export default {
    data() {
      //用户名验证规则
      var validateUsername = (rule,value,callback) =>{
          if (!value) {
              callback(new Error('用户名不能为空'));
          }
          if (!(/^[\u0391-\uFFE5]+$/.test(value))) {
             callback(new Error('用户名只能由汉字组成'));
          }
          callback();
      };
       //手机号码验证规则
      var validatePhone = (rule,value,callback) => {
           if (!value) {
              callback(new Error('手机号码不能为空'));
           } 
           if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(value))) {
               callback(new Error('请输入正确的手机号码'));
           }
           callback();
      };
      //用户账号验证规则
     var validateZhanghao = (rule,value,callback) =>{
          if (!value) {
              callback(new Error('账号不能为空'));
           } 
           if (!(/^[0-9]+$/.test(value))) {
              callback(new Error('账号只能由数字组成'));
           }
           if (value.length<8) {
              callback(new Error('账号长度不能小于8位'));
           }
           callback();
     };

       //用户密码验证规则
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      //确认密码验证规则
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          username:'',
          zhanghao:'',
          pass: '',
          checkPass: '',
          mobile:'',
        },
        rules: {
          username:[
              {validator:validateUsername ,trigger:'blur'}
          ],
          zhanghao:[
              {validator:validateZhanghao,trigger:'blur'}
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          mobile: [
            { validator: validatePhone, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
     async submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
              //console.log(this.ruleForm.mobile);
              //判断手机号码和账号是否存在
                      //服务器端校验手机号码和账号是否存在
                     let resultZhangHao = await verifyZhangHao((this.ruleForm.zhanghao).trim());
                        if (resultZhangHao.status == 500) {
                          console.log("账号已经存在");
                           this.$message({
                              message:'该账号已经存在',
                              type:'warning'
                           });
                         return ;
                      };
                     let resultPhone = await verifyPhone((this.ruleForm.mobile).trim());
                      console.log(resultPhone);
                      if (resultPhone.status == 500) {
                      // console.log("手机号码存在");
                           this.$message({
                              message:'该手机号已经存在',
                              type:'warning'
                           });
                        return ;
                      }
              //存入user表
                    let result = await regist(this.ruleForm.username,this.ruleForm.zhanghao,this.ruleForm.pass,this.ruleForm.mobile);
                         // console.log("wjs");
                      //   console.log(result);
                         if (result.status) {
                             //注册成功，生成鲜活和一般蔬菜两个密码柜编号和对应密码
                               let gui1 = await getxhgui(this.ruleForm.zhanghao);
                               //console.log(gui1);
                               let gui2 = await getybgui(this.ruleForm.zhanghao);
                             // console.log(gui2);
                           //注册成功，把手机号码存在验证码表，以便可以使用手机验证码登录
                             let gui3 = await savePhone(this.ruleForm.mobile);
                           // console.log(gui3);
                                
                            if (gui1.status==='200' && gui2.status==='200'&& gui3.status==='200') {
                                  this.$message({
                                      message:'会员添加成功',
                                      type:'success'
                                   });
                                 this.$router.push({name:'memberList'});                 

                            } 
                     }
              
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>>
<style lang="less" scope>
   #memberAdd{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .form{
      margin-left: 4rem;
      margin-right: 4rem;
   }
</style>